<template>
	<view class="department-general-wrap">
		<view class="left-wrap">
			<view class="left-wrap-top" :style="{backgroundImage: todayHandleList.backgroundImage}">
				<view class="text">{{todayHandleList.headName}}</view>
			</view>
			<view class="left-wrap-bottom">{{todayHandleList.departmentName}}</view>
		</view>
		<view class="right-wrap">
			<view class="right-wrap-item">
				<view class="item-title">异常数</view>
				<view>{{todayHandleList.total}}</view>
			</view>
			<view class="right-wrap-item">
				<view class="item-title">已处置</view>
				<view>{{todayHandleList.handleCount}}</view>
			</view>
			<view class="right-wrap-item">
				<view class="item-title">未处置</view>
				<view>{{todayHandleList.noHandleCount}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroundImageList: [
					{headName: '优秀', backgroundImage: 'linear-gradient(to right, #1ceeaf, #12d8ba)'},
					{headName: '良好', backgroundImage: 'linear-gradient(to right, #f7b700, #fda100)'},
					{headName: '一般', backgroundImage: 'linear-gradient(to right, #ff4d69, #ff3539)'}
				],
				todayHandleList: {
					total: 0,
					handleCount: 0,
					noHandleCount: 0
				},
				assess: {}
			};
		},
		methods: {
			getTodayHandleInfo(departmentId, departmentName) {
				let params = {
				    departmentId
				}
				this.$request.ygstAppExceptionContractorInfoGet(params).then(res => {
					console.log('res ****************', res)
					if (!this.$utils.isEmptyObject(res)) {
					  this.todayHandleList = res
					  this.todayHandleList.departmentName = departmentName
					}
					this.exceptionLightFunc(this.todayHandleList.light)
				})
			},
			exceptionLightFunc(lightNum = 0) {
				let exceptionNum = Math.floor(Math.max(0, lightNum))
				if (exceptionNum === 0) {
				  let {headName, backgroundImage} = this.backgroundImageList[0]
				  this.$set(this.todayHandleList, 'backgroundImage', backgroundImage)
				  this.$set(this.todayHandleList, 'headName', headName)
				} else if (exceptionNum > 0 && exceptionNum < 7) {
				  let {headName, backgroundImage} = this.backgroundImageList[1]
				  this.backgroundImage = backgroundImage
				  this.headName = headName
				  this.$set(this.todayHandleList, 'backgroundImage', backgroundImage)
				  this.$set(this.todayHandleList, 'headName', headName)
				} else {
				  let {headName, backgroundImage} = this.backgroundImageList[2]
				  this.backgroundImage = backgroundImage
				  this.headName = headName
				  this.$set(this.todayHandleList, 'backgroundImage', backgroundImage)
				  this.$set(this.todayHandleList, 'headName', headName)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.department-general-wrap {
		box-sizing: border-box;
		// height: 240rpx;
		padding: 10rpx 36rpx;
		display: flex;
		flex-flow: row nowrap;
		.left-wrap {
			width: 180rpx;
			flex: 0 0 180rpx;
			display: flex;
			flex-flow: column;
			align-items: center;
			.left-wrap-top {
				position: relative;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				background-color: #FAFAFA;
				.text {
					color: #fff;
					font-size: 34rpx;
					text-align: center;
					line-height: 200rpx;
				}
			}
			.left-wrap-bottom {
				width: 200rpx;
				margin: 10rpx 0rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.right-wrap {
			box-sizing: border-box;
			padding-left: 36rpx;
			text-align: center;
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			font-size: 32rpx;
			font-weight: bold;
			.right-wrap-item {
				// height: 240rpx;
				display: flex;
				flex-flow: column nowrap;
				.item-title {
					box-sizing: border-box;
					margin: 34rpx auto;
				}
			}
		}
	}
</style>
